<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<table id="tg" class="easyui-treegrid" title="资源" style="width:100%;height:100%"
        data-options="
            
            rownumbers: true,
            animate: true,
            toolbar:'#tb',
            collapsible: true,
            fitColumns: true,
            url: 'app/resource/datas',
            method: 'get',
            idField: 'id',
            treeField: 'text'
        ">
    <thead>
        <tr>
            <th data-options="field:'text',width:180">名称</th>
            <th data-options="field:'url',width:60">URL</th>
            <th data-options="field:'orderNum',width:80">顺序</th>
        </tr>
    </thead>
</table>
<!--------------------------------------- toolbar  ------------------------------------------------------>
<div id="tb">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td><a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-add'">添加</a></td>
            <td><div class="datagrid-btn-separator"></div></td>
            <td><a id="btnEdit" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a></td>
            <td><div class="datagrid-btn-separator"></div></td>
            <td><a id="btnDelete" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a></td>
        </tr>
    </table>
</div>

<div id="mm2" style="width:100px;">
    <div id="_root">根节点</div>
    <div id="_sub">子节点</div>
</div>

<!--------------------------------------- form  ------------------------------------------------------>
<div id="w" class="easyui-window" title="添加/修改" data-options="modal:true,closed:true,footer:'#footer'" style="width:800px;height:500px;padding:10px;">
    <form id="ff" method="post">
        <input type="hidden" name="id" id="id" />
        <input type="hidden" name="parentId" id="parentId" />
        <table cellpadding="5">
            <tr>
                <td>名称:</td>
                <td><input class="easyui-textbox" type="text" id="text" name="text" style="width:200px;" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>URL:</td>
                <td><input class="easyui-textbox" type="text" id="url" name="url" style="width:300px;" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>顺序:</td>
                <td><input class="easyui-numberbox" type="text" id="orderNum" name="orderNum" style="width:100px;" data-options="required:true,min:0,max:100"></input></td>
            </tr>
        </table>
    </form>
</div>
<div id="footer" data-options="region:'south',border:false" style="text-align:right;padding:2px;">
    <a id="btnSave" class="easyui-linkbutton"  href="javascript:void(0)" style="width:80px">确定</a>
    <a id="btnCancel" class="easyui-linkbutton"  href="javascript:void(0)" style="width:80px">取消</a>
</div>

<script>
    $(function($){
    	var url;
        var saveOrUpdate = function(){

            $('#ff').form('submit', {
              url : url,
              onSubmit : function() {
                return $(this).form('validate');
              },
              success : function(result) {
                json = JSON.parse(result);
                if (json.status == 0) {
                  $.messager.show({
                    title : 'Error',
                    msg : '服务器出错，请稍后再试'
                  });
                } else {
                  $('#w').window('close'); // close the dialog
                  $('#tg').treegrid('reload'); // reload the data
                }
              }
            });
          }
        
        $("#btnDelete").click(function(){
            var row = $('#tg').treegrid('getSelected');
            if (row){
              $.messager.confirm('提示','确定要删除？',function(r){
                if (r){
                    $.ajax({
                        url: 'app/resource/delete/' + row.id,
                        type:'post',
                        dataType: "json",
                        success: function(json){
                            if (json.status == 1) {
                                $('#tg').treegrid('reload');
                            } else {
                                $.messager.show({
                                    title : '删除异常',
                                    msg : json.message
                                });
                            }
                        },
                        error: function(msg){
                            $.messager.show({
                                title : '出错',
                                msg : '服务器出错，请稍后再试:' + msg
                            });
                        }
                    });
                }
              });
            }
        });
    	
    	$("#_root").click(function(){
    		$('#w').window('open');
            $('#ff').form('clear');
            url = "app/resource/save";
    	});
    	
    	$("#_sub").click(function(){
    		var row = $('#tg').treegrid('getSelected');
            if (row){
              $('#w').window('open');
              $('#ff').form('clear');
              $("#parentId").val(row.id);
              url = "app/resource/save";
            } else {
            	$.messager.alert('提示','请选择一个父节点');
            }
    	});
    	
    	$("#btnEdit").click(function(){
            var row = $('#tg').treegrid('getSelected');
            if (row){
              $('#w').window('open');
              $('#ff').form('load',row);
              $("#parentId").val(row._parentId);
              url = "app/resource/update";
            } else {
            	$.messager.alert('提示',"请选择一条记录");
            }
        });
    	
    	$("#btnSave").click(function(){
            saveOrUpdate();
        });
        
        $("#btnCancel").click(function(){
            $('#w').window('close');
        });
    })
    
    
</script>
